<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar leftToolbar">
      <el-form :inline="true" :model="filters" :size="size">
        <el-col :span="3">
          <el-form-item>
            <el-input v-model="filters.entityName" placeholder="对象" />
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-input v-model="filters.dataId" placeholder="数据ID" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-date-picker v-model="filters.date" type="daterange" range-separator="至" start-placeholder="开始" end-placeholder="结束" clearable value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <kt-button icon="fa fa-search" label="搜索" perms="system:auditlog:view" type="primary" @click="findPage(null)" />
            <kt-button type="danger" icon="fa fa-trash" label="清空" perms="system:auditlog:clean" @click="handleClean" />
          </el-form-item>
        </el-col>
      </el-form>
      <!--表格显示列界面-->
      <kt-table-column-filter-dialog ref="filterDialog" :columns="columns" @handle-filter-columns="handleFilterColumns" />
    </div>
    <div class="toolbar rightToolbar">
      <el-form :inline="true" :size="size">
        <el-form-item>
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage(null)" />
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog" />
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
    </div>
    <!--表格内容栏-->
    <kt-table perms-edit="NONE" perms-delete="system:auditlog:remove" :data="pageResult" :page-params="pageRequest" :columns="filterColumns" @find-page="findPage" :show-index="false" :show-operation="false" :show-batch-delete="false" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import KtTable from '@/views/Core/KtTable'
import KtButton from '@/views/Core/KtButton'
import KtTableColumnFilterDialog from '@/views/Core/KtTableColumnFilterDialog'
import { formatDate } from '@/utils/datetime'
export default {
  inject: ['reload'],
  components: {
    KtTable,
    KtButton,
    KtTableColumnFilterDialog
  },
  data () {
    return {
      size: 'mini',
      filters: {
        dataId: '',
        entityName: '',
        date: ''
      },
      columns: [
        { prop: 'id', label: 'ID', minWidth: 50, width: 50, show: false },
        { prop: 'createBy', label: '创建人', minWidth: 80, width: 80 },
        { prop: 'createTime', label: '创建时间', minWidth: 130, width: 130, formatter: this.dateFormat },
        { prop: 'entityName', label: '对象', minWidth: 80, width: 80 },
        { prop: 'dataId', label: '数据', minWidth: 80, width: 80 },
        { prop: 'type', label: '类别', minWidth: 80, width: 80, formatter: this.statusFormat },
        { prop: 'content', label: '内容', minWidth: 120 },
        { prop: 'ip', label: 'IP', minWidth: 120, width: 120 },
        { prop: 'functionName', label: '函数名', minWidth: 80 }
      ],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10, sortby: 'createTime', order: 'desc' },
      pageResult: {}
    }
  },
  methods: {
    // 获取分页数据
    findPage (data) {
      if (data !== null) {
        this.pageRequest = data.pageRequest
      }
      this.pageRequest.params = {
        dataId: this.filters.dataId,
        entityNameLike: this.filters.entityName,
        createTimeGte: this.filters.date[0],
        createTimeLte: this.filters.date[1]
      }
      this.$api.auditlog.findPage(this.pageRequest).then((res) => {
        this.pageResult = res.data
      }).then(data != null ? data.callback : '')
    },
    // 清空
    handleClean () {
      this.$confirm('确认清空昨天以前的审核日志吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$api.auditlog.clean().then((res) => {
          if (res.code === 0) {
            this.$message({ message: '清空成功', type: 'success' })
            this.reload()
          }
        })
      }).catch(() => { })
    },
    // 时间格式化
    dateFormat (row, column, cellValue, index) {
      return formatDate(cellValue, 'yy-MM-dd hh:mm:ss')
    },
    // 状态格式化
    statusFormat (row, column, cellValue, index) {
      for (let i = 0; i < this.statusList.length; i++) {
        // eslint-disable-next-line
        if (this.statusList[i].value == cellValue) {
          return '<span class="' + this.statusList[i].clazz + '">' + this.statusList[i].label + '</span>'
        }
      }
      return ''
    },
    // 处理表格列过滤显示
    displayFilterColumnsDialog () {
      this.$refs.filterDialog.setDialogVisible(true)
    },
    // 处理表格列过滤显示
    handleFilterColumns (data) {
      this.filterColumns = data.filterColumns
      this.$refs.filterDialog.setDialogVisible(false)
    }
  },
  mounted () {
    this.$refs.filterDialog.initColumns()
  },
  computed: {
    ...mapState({
      statusList: state => state.app.typeList.sys_data_operation
    })
  }
}
</script>

<style lang="scss" scoped>
.el-date-editor--daterange.el-input__inner {
  width: 100%;
}
</style>
